<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>山寨双向绑定</title>
    </head>
    <body>
        <h3>山寨双向绑定</h3>

        <input type="text" id="message" >

        <p id="display"></p>

        <script type="text/javascript">
            const display = document.querySelector( '#display' );
            const message = document.querySelector( '#message' );

            const t = {
                message: ''
            }
            const h = {
                set(target,field,value){
                    target[ field ] = value ;
                    display.innerHTML = value ;
                    message.value = value ;
                },
                get(target,field){
                    return target[ field ];
                }
            }
            const p = new Proxy( t , h );
            
            message.addEventListener( 'input' , e => {
                // 一旦输入框中输入内容
                p.message = e.target.value ;
            } , false );

            
        </script>
    </body>
</html>